<template>
  <div class="audit-addProductAndPrice-view">

    <el-form
            label-width="110px"
            label-position="right"
            :inline="true"
    >

      <el-row>

        <el-col :span="8">
          <el-form-item label="流程编号：">
            {{ detailData.processNo }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="创建时间：">
            {{ dateFormat('yyyy-mm-dd HH:MM',detailData.startTime) }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="创建人：">
            {{ detailData.initiator }}
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <item-title title="招商要素信息" />

    <el-form label-width="110px" label-position="right" :inline="true">
      <el-row>
        <el-col :span="8">
          <el-form-item v-if="agentProduct.agentType == 'agent'" label="代理商名称：">
            {{ agentProduct.agentName }}
          </el-form-item>
          <el-form-item v-else label="兼职名称：">
            {{ agentProduct.userName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="招商要素编号：">
            {{ agentProduct.agentProductNumber }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品：">
            <span>{{ getProductName(agentProduct) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="代理地区：">
            <area-list-view :areas="agentProduct.region" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="交易价：">
            <div style="display: flex;align-items: center">
              <span>{{ agentProduct.tradePrice }}元/{{ getLabel('sell_unit',agentProduct.sellUnit) }}</span>
            </div>

          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="可营销终端：">
            {{ getLabel('app_mode',agentProduct.terminalType) }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="代理期限至：">
            {{ dateFormat('yyyy-mm-dd',agentProduct.agentEndTime) }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="最低销量：">
            <div v-if="agentProduct.minSale">
              <span v-if="agentProduct.isIncrease == 2">首年{{agentProduct.minSale}}{{getLabel('sell_unit',agentProduct.sellUnit)}},每年递增{{agentProduct.increaseNum}}%</span>
              <span v-else>{{agentProduct.minSale}}{{getLabel('sell_unit',agentProduct.sellUnit)}}/{{ getLabel('sell_num_unit',agentProduct.minSaleUnit) }}</span>
            </div>
<!--            <span v-if="agentProduct.minSale">{{ agentProduct.minSale }}{{ getLabel('sell_unit',agentProduct.sellUnit) }}/{{ getLabel('sell_num_unit',agentProduct.minSaleUnit) }}</span>-->
            <span v-else>未设置</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="销量保证金：">
            <span v-if="agentProduct.minSalePromise">{{ agentProduct.minSalePromise }}元</span>
            <span v-else>未设置</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="负责营销职员：">
            {{ agentProduct.headName }}
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="agentProduct.saleTaskId">
          <el-form-item label="关联营销任务：">

            <el-link
                    :underline="false"
                    style="display: flex;align-items: center"
                    type="primary"
                    @click="onPlan"
            >
              {{ agentProduct.saleTaskNo }}
            </el-link>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="其他约定：">
            {{ agentProduct.remark }}
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

    <!--合同详情-->
    <detail-drawer
            ref="detailDrawer"
            custom-title
            :size-width="1000"
    >
      <template #title>
        <span>合同 </span>
        <span class="drawerTitle">{{ agentProduct.contractName }} </span>
      </template>
      <template
              #contents
      >
        <div class="drawer-content">
          <div class="history-list">
            <contract-detail
                    ref="salesDetailDrawer"
                    :contract-id="agentProduct.contractId"
            />
          </div>
        </div>
      </template>
    </detail-drawer>

    <detail-drawer
            ref="comDrawer"
            :size-width="1000"
            custom-title
    >
      <template #title>

        <span>营销任务</span>

      </template>
      <template #contents>

        <taskConfirmView :id="agentProduct.saleTaskId"/>

      </template>
    </detail-drawer>

  </div>
</template>

<script>
// 新增产品与价格审批
import {defineAsyncComponent, defineComponent, reactive, toRefs, watch} from 'vue'

export default defineComponent({
    name: 'AddProductAndPrice',
    components: {
      contractDetail: defineAsyncComponent(() => import('../../../../commonView/contract/contractDetail.vue')),
      taskConfirmView: defineAsyncComponent(() => import('../../../../commonView/detailComponents/task/taskConfirmView.vue'))
    },
    props: {
      detailData: {
        type: Object,
        default: {}
      },
    },
    setup(props) {
      var data = reactive({
        datas: {},
        agentProduct: {},
        type: 'agent',
        detailDrawer: null,
        comDrawer:null,
      })

      watch(
              () => props.detailData,
              (newval, oldval) => {
                if (newval && newval.data) {
                  console.log(newval.data)
                  if (newval.processDefinitionKey == 'agentPersonProductCreate' ||
                          newval.processDefinitionKey == 'agentPersonProductChangePrice' ||
                          newval.processDefinitionKey == 'agentPersonProductBan') {
                    data.type = 'agent_person'
                  }
                  data.agentProduct = newval.data
                }
              },
              { immediate: true, deep: true }
      )

      const contractClick = () => {
        data.detailDrawer.open()
      }

      const onPlan = () => {
        data.comDrawer.open()
      }

      return {
        ...toRefs(data),

        contractClick,
        onPlan,
      }
    }
  })
</script>

<style lang="scss" scoped>
  @import "@/style/basics.scss";
  .audit-addProductAndPrice-view{
    .mainColor{
      color: $active-color;
    }
    .drawerTitle{
      font-size: 18px;
    }
  }
</style>
